//设置axios基地址
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

//获取元素
const list = document.querySelector('.top')

const renderList = async () => {
  //发起一级请求
  const { data: res } = await axios({
    url: '/api/category/top',
    method: 'GET',
  })

  //发起二级请求
  const newArr = res.data.map((item) => {
    return axios({
      url: '/api/category/sub?id=' + item.id,
      method: 'GET',
    })
  })

  const pua = await Promise.all(newArr)

  //渲染页面
  const html = pua
    .map(({ data: item }) => {
      console.log(item)
      return `
      <li>
        <a href="javascript:;">${item.data.name}</a>
         <img src="${item.data.picture}" alt="">
        <ul class="sub">
        ${item.data.children
          .map((item) => {
            return `
          <li>
          <a href="javascript:;">
            <span>${item.name}</span>
            <img src="${item.picture}" alt="">
          </a>
        </li>
          `
          })
          .join('')}
        </ul>
      </li>
   `
    })
    .join('')

  list.innerHTML = html
}

renderList()